<template>
     <transition enter-active-class="animated" leave-active-class="animated bounceInLeft">
               <div id="list_box" :class="parent_value?'fadeIn1 bounceInUp':'fadeOut1'">
                   <router-link :to="{name:'fabu',params:{id}}">
                        <div class="list">
                            <div class="list_img">
                                <img src="./../../static/img/pick.png" alt="">
                            </div>
                            <div class="text">
                                <p>图片 <span class="span">我要晒图</span></p>
                            </div>
                        </div>
                   </router-link>

                   <router-link :to="{name:'fabuVideo',params:{id}}">
                        <div class="list">
                            <div class="list_img">
                                <img src="./../../static/img/video.png" alt="">
                            </div>
                            <div class="text">
                                <p>视频 <span class="span">我想发视频</span></p>
                            </div>
                        </div>
                   </router-link>
               </div>
        </transition>
</template>
<style>
    #list_box{
        width: 100%;
        position: fixed;
        bottom: 136px;
        left: 0;
        padding: .5em;
    }
    .fadeIn1{
        display: block
    }
    .fadeOut1{
        display: none;
    }
    #list_box>a>.list{
        display: flex;
        align-items: center;
        padding: .5em;
        margin-bottom: .5em;
      
    }
    #list_box>a{
        border-radius: .5em;
    }
    #list_box>a:nth-child(1){
        display: block;
        background: #82c12f;
    }
    #list_box>a:nth-child(2){
        display: block;
        background: #f18905;
    }
    #list_box>a>.list>.list_img{
        width: 50px;
        height: 50px;
        margin-right: 1em;
    }
    #list_box>a>.list>.list_img>img{
        width: 100%;
    }
    .list>.text{
        font-weight: bolder;
        color: #fff;
    }
    .list>.text>p>.span{
        color: #d8d3d3;
    }
</style>
<script>
export default {
    data(){
        return {
            
        }
    },
    props: ['parent_value',"id"]
}
</script>

